<template>
  <div class="addOrEditArticle main-content">
    <div class="title">{{ route.query.articleId ? '编辑' : '新增' }}文章</div>
    <el-form ref="formRef" :model="form" :rules="rules" class="addOrEdit-form" label-width="166">
      <el-col :span="10">
        <el-form-item prop="categoryId" label="文章分类">
          <el-select v-model="form.categoryId" placeholder="请选择文章分类">
            <el-option v-for="item in categoryList" :value="item.categoryId" :label="item.categoryName" :key="item.categoryId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item prop="title" label="文章标题">
          <el-input v-model="form.title" type="text" auto-complete="off" placeholder="请输入标题"> </el-input>
        </el-form-item>
      </el-col>
      <el-form-item prop="coverImage" label="封面图片">
        <imageUpload v-model="form.coverImage" :is-show-tip="false" :limit="1" />
      </el-form-item>
      <el-form-item prop="publishTimeType" label="发布时间">
        <el-radio-group v-model="form.publishTimeType" @change="changePublishTimeType">
          <el-radio label="1">立即发布</el-radio>
          <!-- <el-radio label="2">定时发布</el-radio> -->
        </el-radio-group>
        <!-- <el-date-picker
          v-if="form.publishTimeType === '2'"
          clearable
          v-model="form.publishTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择发布时间"
        /> -->
      </el-form-item>
      <el-form-item prop="isActive" label="是否生效">
        <el-radio-group v-model="form.isActive">
          <el-radio v-for="dict in logic_isactive" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="articleDetails" label="文章详情" style="margin-bottom: 20px;">
        <editor v-model="form.articleDetails" :min-height="474" />
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="AddOrEditArticle">
import { getArticle, addArticle, updateArticle } from '@/api/logic/article';
import { listArticleCategory } from '@/api/logic/articleCategory';
import { parseTime } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { logic_isactive } = toRefs<any>(proxy?.useDict('logic_isactive'));

const route = useRoute();
const router = useRouter();

// 文章表单
const form = ref({
    categoryId: '',
    title: '',
    coverImage: [],
    publishTimeType: '1',
    // publishTime: [],
    isActive: '1',
    articleDetails: ''
})
// 文章校验规则
const rules = {
    categoryId: [{ required: true, trigger: 'change', message: '请选择文章分类' }],
    title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
    coverImage: [{ required: true, trigger: 'change', message: '请上传封面图片' }],
    // publishTime: [{ required: true, trigger: 'change', message: '请选择发布时间' }],
    publishTimeType: [{ required: true, trigger: 'change', message: '请选择发布时间' }],
    isActive: [{ required: true, trigger: 'change', message: '请选择是否生效' }],
    articleDetails: [{ required: true, trigger: 'blur', message: '请输入文章详情' }],
}
// 文章分类
const categoryList = ref([])
// 获取文章分类
const getCategoryList =  async() => {
  try {
    const res = await listArticleCategory({isActive: 1});
    categoryList.value = res.rows
  } catch (error) {
    categoryList.value = []
  }
}

// 获取文章详情
const getDetail = async() => {
  try {
    const res = await getArticle(route.query.articleId);
    res.data.isActive = String(res.data.isActive)
    Object.assign(form.value, res.data);
  } catch (error) {
    console.log(error);
  }
}

const formRef = ref()
// 切换发布时间
const changePublishTimeType = () => {
  formRef.value && formRef.value.clearValidate('publishTime')
}
// 新增/编辑文章
const confirm = async () => {
  formRef.value && formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const param = {
        coverImage: form.value.coverImage,
        categoryId: form.value.categoryId,
        title: form.value.title,
        publishTime: parseTime(new Date()),
        articleDetails: form.value.articleDetails,
        isActive: form.value.isActive
      }
      if (route.query.articleId) param.articleId = route.query.articleId
      try {
        route.query.articleId ? await updateArticle(param) : await addArticle(param)
        proxy?.$modal.msgSuccess(route.query.articleId ? "编辑成功" : '保存成功');
        setTimeout(() => {
          router.back()
        }, 200)
      } catch (error) {
        console.log(error);
      }
    }
  });
}
// 取消
const cancel = () => {
  router.back()
}

onMounted(() =>{
  getCategoryList()
    if (route.query.articleId) getDetail()
})
</script>

<style lang="scss" scoped>
.addOrEditArticle {
  .title {
    font-weight: 700;
    font-size: 16px;
    color: #3D3D3D;
    margin-bottom: 32px;
  }
    .addOrEdit-form {
      .el-select.el-select--small {
        width: 480px;
      }
    }

  }
  :deep(.el-form-item.el-form-item--default) {
    margin-bottom: 32px;
  }
  :deep(.el-input__wrapper) {
    width: 480px;
  }
  :deep( .el-select.el-select--default) {
    width: 480px;
  }
  :deep(.el-form-item__label) {
    height: 40px;
    line-height: 40px;
  }
  :deep(.el-input__inner) {
    width: 480px;
    height: 40px;
    line-height: 40px;
  }
  :deep(.editor) {
    width: 63.9vw !important;
  }
</style>
